<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - pv.Layout.treemap</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

pre
{
	border-left: solid 10px #ddd;
	padding-left: 1.5em;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}

		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/Array.html">Array</a></li>
	
	<li><a href="../symbols/Date.html">Date</a></li>
	
	<li><a href="../symbols/pv.html">pv</a></li>
	
	<li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
	
	<li><a href="../symbols/pv.Area.html">pv.Area</a></li>
	
	<li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
	
	<li><a href="../symbols/pv.Color.html">pv.Color</a></li>
	
	<li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
	
	<li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
	
	<li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
	
	<li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
	
	<li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
	
	<li><a href="../symbols/pv.Image.html">pv.Image</a></li>
	
	<li><a href="../symbols/pv.Label.html">pv.Label</a></li>
	
	<li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
	
	<li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
	
	<li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
	
	<li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
	
	<li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
	
	<li><a href="../symbols/pv.Line.html">pv.Line</a></li>
	
	<li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
	
	<li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
	
	<li><a href="../symbols/pv.ns.html">pv.ns</a></li>
	
	<li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
	
	<li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
	
	<li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
	
	<li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
	
	<li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
	
	<li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
	
	<li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
	
	<li><a href="../symbols/pv.version.html">pv.version</a></li>
	
	<li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class pv.Layout.treemap
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				
			
				A tree layout in the form of an treemap. <img
src="../treemap.png" width="160" height="160" align="right"> Treemaps
are a form of space-filling layout that represents nodes as boxes, with child
nodes placed within parent boxes. The size of each box is proportional to the
size of the node in the tree.

<p>This particular algorithm is taken from Bruls, D.M., C. Huizing, and
J.J. van Wijk, <a href="http://www.win.tue.nl/~vanwijk/stm.pdf">"Squarified
Treemaps"</a> in <i>Data Visualization 2000, Proceedings of the Joint
Eurographics and IEEE TCVG Sumposium on Visualization</i>, 2000,
pp. 33-42.

<p>This tree layout is intended to be extended (see <a href="../symbols/pv.Mark.html#extend">pv.Mark#extend</a>)
by a <a href="../symbols/pv.Bar.html">pv.Bar</a>. The data property returns an array of nodes for use by
other property functions. The following node attributes are supported:

<ul>
<li><tt>left</tt> - the cell left position.
<li><tt>top</tt> - the cell top position.
<li><tt>width</tt> - the cell width.
<li><tt>height</tt> - the cell height.
<li><tt>depth</tt> - the node depth (tier; the root is 0).
<li><tt>keys</tt> - an array of string keys for the node.
<li><tt>size</tt> - the aggregate node size.
<li><tt>children</tt> - child nodes, if any.
<li><tt>data</tt> - the associated tree element, for leaf nodes.
</ul>

To produce a default treemap layout, say:

<pre>.add(pv.Bar)
  .extend(pv.Layout.treemap(tree))</pre>

To display internal nodes, and color by depth, say:

<pre>.add(pv.Bar)
  .extend(pv.Layout.treemap(tree).inset(10))
  .fillStyle(pv.Colors.category19().by(function(n) n.depth))</pre>

The format of the <tt>tree</tt> argument is a hierarchical object whose leaf
nodes are numbers corresponding to their size. For an example, and
information on how to convert tabular data into such a tree, see
<a href="../symbols/pv.Tree.html">pv.Tree</a>. If the leaf nodes are not numbers, a <a href="#size">#size</a> function
can be specified to override how the tree is interpreted. This size function
can also be used to transform the data.

<p>By default, the treemap fills the full width and height of the parent
panel, and only leaf nodes are rendered. If an <a href="#inset">#inset</a> is specified,
internal nodes will be rendered, each inset from their parent by the
specified margins. Rounding can be enabled using <a href="#round">#round</a>. Finally, an
optional root key can be specified using <a href="#root">#root</a> for convenience.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/layout_Treemap.js.html">Treemap.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Layout.treemap.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/pv.Layout.treemap.html#constructor">pv.Layout.treemap</a></b>(tree)
							</div>
							<div class="description">Returns a new treemap tree layout.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Layout.treemap.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Layout.treemap.html#inset">inset</a></b>(top, right, bottom, left)
								</div>
								<div class="description">Specifies the margins to inset child nodes from their parents; as a side
effect, this also enables the display of internal nodes, which are hidden
by default.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Layout.treemap.html#root">root</a></b>(v)
								</div>
								<div class="description">Specifies the root key; optional.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Layout.treemap.html#round">round</a></b>(v)
								</div>
								<div class="description">Enables or disables rounding.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Layout.treemap.html#size">size</a></b>(f)
								</div>
								<div class="description">Specifies the sizing function.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>pv.Layout.treemap</b>(tree)
				</div>
				
				<div class="description">
					Returns a new treemap tree layout.
					
				</div>
				
				
				
				
					
						<dl class="detailList">
						<dt class="heading">Parameters:</dt>
						
							<dt>
								 <b>tree</b>
								
							</dt>
								<dd>a tree (an object) who leaf attributes have sizes.</dd>
						
						</dl>
					
					
					
					
					
						<dl class="detailList">
						<dt class="heading">Returns:</dt>
						
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span> a tree layout.</dd>
						
						</dl>
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="inset"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span>
					<b>inset</b>(top, right, bottom, left)
					
					</div>
					<div class="description">
						Specifies the margins to inset child nodes from their parents; as a side
effect, this also enables the display of internal nodes, which are hidden
by default. If only a single argument is specified, this value is used to
inset all four sides.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{number}</span> <b>top</b>
									
								</dt>
								<dd>the top margin.</dd>
							
								<dt>
									<span class="light fixedFont">{number}</span> <b>right</b>
									<i>Optional</i>
								</dt>
								<dd>the right margin.</dd>
							
								<dt>
									<span class="light fixedFont">{number}</span> <b>bottom</b>
									<i>Optional</i>
								</dt>
								<dd>the bottom margin.</dd>
							
								<dt>
									<span class="light fixedFont">{number}</span> <b>left</b>
									<i>Optional</i>
								</dt>
								<dd>the left margin.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span> this.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="root"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span>
					<b>root</b>(v)
					
					</div>
					<div class="description">
						Specifies the root key; optional. The root key is prepended to the
<tt>keys</tt> attribute for all generated nodes. This method is provided
for convenience and does not affect layout.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{string}</span> <b>v</b>
									
								</dt>
								<dd>the root key.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span> this.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="round"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span>
					<b>round</b>(v)
					
					</div>
					<div class="description">
						Enables or disables rounding. When rounding is enabled, the left, top,
width and height properties will be rounded to integer pixel values. The
rounding algorithm uses error accumulation to ensure an exact fit.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{boolean}</span> <b>v</b>
									
								</dt>
								<dd>whether rounding should be enabled.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span> this.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="size"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span>
					<b>size</b>(f)
					
					</div>
					<div class="description">
						Specifies the sizing function. By default, the sizing function is
<tt>Number</tt>. The sizing function is invoked for each node in the tree
(passed to the constructor): the sizing function must return
<tt>undefined</tt> or <tt>NaN</tt> for internal nodes, and a number for
leaf nodes. The aggregate sizes of internal nodes will be automatically
computed by the layout.

<p>For example, if the tree data structure represents a file system, with
files as leaf nodes, and each file has a <tt>bytes</tt> attribute, you can
specify a size function as:

<pre>.size(function(d) d.bytes)</pre>

This function will return <tt>undefined</tt> for internal nodes (since
these do not have a <tt>bytes</tt> attribute), and a number for leaf nodes.

<p>Note that the built-in <tt>Math.sqrt</tt> and <tt>Math.log</tt> methods
can be used as sizing functions. These function similarly to
<tt>Number</tt>, except perform a root and log scale, respectively.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>f</b>
									
								</dt>
								<dd>the new sizing function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a>}</span> this.</dd>
							
							</dl>
						
						
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Tue Oct 06 2009 09:59:02 GMT-0700 (PDT)
		</div>
	</body>
</html>
